import React, { useState } from 'react';
import { Layout, Typography, Tag, Space, Divider, Button, Skeleton, Card } from 'antd';
import { ArrowLeftOutlined, ShareAltOutlined, StarOutlined } from '@ant-design/icons';
import { useNavigate, useParams, Link } from 'react-router-dom';
import MainLayout from '../../../components/MainLayout';
import styles from './detail.module.css';

const { Title, Text, Paragraph } = Typography;

// Mock data - replace with actual API call
const mockNewsDetail = {
  id: 1,
  title: '产业链发展新动态：数字化转型提速',
  time: '2024-03-15',
  source: '吉林日报',
  importance: '高',
  author: '张三',
  content: `
    <p>随着数字技术的快速发展，我省产业链数字化转型进程明显加快。近日，省政府召开数字化转型专题会议，
    部署推进产业链数字化转型工作，明确了下一阶段的重点任务和目标。</p>
    
    <p>会议指出，要以数字化转型为抓手，推动产业链现代化水平提升。重点支持新一代信息技术、高端装备制造、
    新能源汽车等重点产业，加快数字化改造升级。</p>
    
    <h3>主要目标</h3>
    <ul>
      <li>到2025年，规上工业企业数字化转型覆盖率达到80%以上</li>
      <li>培育100家以上数字化转型示范企业</li>
      <li>打造10个以上数字化转型示范产业园区</li>
    </ul>
    
    <h3>重点任务</h3>
    <ol>
      <li>加快工业互联网平台建设</li>
      <li>推进智能制造示范项目建设</li>
      <li>强化数字化人才培养</li>
      <li>完善数字化转型政策支持体系</li>
    </ol>`,
  relatedNews: [
    {
      id: 2,
      title: '我省出台数字经济发展新政策',
      time: '2024-03-14'
    },
    {
      id: 3,
      title: '首批数字化转型示范企业名单公布',
      time: '2024-03-13'
    }
  ]
};

const NewsDetail = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const [isLoading, setIsLoading] = useState(false);
  const [isFavorited, setIsFavorited] = useState(false);

  const handleBack = () => {
    navigate(-1);
  };

  const handleShare = () => {
    // Implement share functionality
  };

  const handleFavorite = () => {
    setIsFavorited(!isFavorited);
    // Implement favorite functionality
  };

  if (isLoading) {
    return (
      <MainLayout>
        <Layout className={styles.container}>
          <Skeleton active paragraph={{ rows: 12 }} />
        </Layout>
      </MainLayout>
    );
  }

  return (
    <MainLayout>
      <Layout className={styles.container}>
        <div className={styles.content}>
          <div className={styles.header}>
            <Button 
              type="link" 
              icon={<ArrowLeftOutlined />} 
              onClick={handleBack}
              className={styles.backButton}
            >
              返回列表
            </Button>
            <Space className={styles.actions}>
              <Button 
                type={isFavorited ? 'primary' : 'default'}
                icon={<StarOutlined />}
                onClick={handleFavorite}
              >
                {isFavorited ? '已收藏' : '收藏'}
              </Button>
              <Button 
                icon={<ShareAltOutlined />}
                onClick={handleShare}
              >
                分享
              </Button>
            </Space>
          </div>

          <article className={styles.article}>
            <Title level={2}>{mockNewsDetail.title}</Title>
            
            <Space split={<Divider type="vertical" />} className={styles.meta}>
              <Text type="secondary">发布时间：{mockNewsDetail.time}</Text>
              <Text type="secondary">来源：{mockNewsDetail.source}</Text>
              <Text type="secondary">作者：{mockNewsDetail.author}</Text>
              <Tag color="#f50">重要程度：{mockNewsDetail.importance}</Tag>
            </Space>

            <div 
              className={styles.content}
              dangerouslySetInnerHTML={{ __html: mockNewsDetail.content }}
            />

            <div className={styles.relatedNews}>
              <Title level={4}>相关新闻</Title>
              <ul>
                {mockNewsDetail.relatedNews.map(news => (
                  <li key={news.id}>
                    <Link to={`/knowledge/news/${news.id}`}>{news.title}</Link>
                    <Text type="secondary" className={styles.relatedNewsTime}>
                      {news.time}
                    </Text>
                  </li>
                ))}
              </ul>
            </div>
          </article>
        </div>
      </Layout>
    </MainLayout>
  );
};

export default NewsDetail;